<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>代码暴雨逃生</title>
  <style>
    body {
      margin: 0;
      overflow: hidden; /* 隐藏滚动条，让画布占满屏幕 */
      background: #000; /* 黑色背景，突出彩色代码 */
      font-family: "Consolas", "Monaco", monospace; /* 等宽字体，模拟代码感 */
    }
    .code {
      position: absolute;
      color: hsl(var(--hue), 100%, 70%); /* 用CSS变量动态改颜色 */
      font-size: 16px;
      white-space: nowrap; /* 防止代码换行 */
    }
    .game-over {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: red;
      font-size: 32px;
      display: none; /* 初始隐藏，失败时显示 */
    }
    .score {
      position: fixed;
      top: 20px;
      right: 20px;
      color: #fff;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="score">得分: <span id="score">0</span></div>
  <div class="game-over" id="gameOver">游戏结束！</div>

  <script>
    // 全局变量
    const codes = []; // 存储所有下落的代码元素
    let score = 0;
    let speed = 2; // 初始下落速度
    let spawnRate = 1500; // 初始生成代码的间隔（毫秒）

    // 初始化游戏
    function initGame() {
      // 每 spawnRate 毫秒生成一个新代码
      setInterval(spawnCode, spawnRate);
      // 每帧更新代码位置
      requestAnimationFrame(update);
      // 监听键盘输入
      document.addEventListener("keydown", handleKeyPress);
    }

    // 生成新的代码元素
    function spawnCode() {
      const codeEl = document.createElement("div");
      codeEl.className = "code";
      // 随机字符（可扩展为单词、代码片段）
      const chars = "abcdefghijklmnopqrstuvwxyz0123456789{}[]();:,";
      const char = chars[Math.floor(Math.random() * chars.length)];
      codeEl.textContent = char;
      // 随机颜色（通过HSL的色相值变化）
      codeEl.style.setProperty("--hue", Math.random() * 360);
      // 随机水平位置
      codeEl.style.left = `${Math.random() * 100}vw`;
      // 初始垂直位置
      codeEl.style.top = "-20px";
      document.body.appendChild(codeEl);
      codes.push({
        el: codeEl,
        text: char,
        y: -20,
      });
    }

    // 更新代码位置
    function update() {
      let gameLost = false;
      for (let i = codes.length - 1; i >= 0; i--) {
        const code = codes[i];
        // 下落
        code.y += speed;
        code.el.style.top = `${code.y}px`;
        // 检查是否触底（屏幕高度约90vh，可根据需求调整）
        if (code.y > window.innerHeight * 0.9) {
          gameLost = true;
          break;
        }
      }
      // 游戏失败
      if (gameLost) {
        document.getElementById("gameOver").style.display = "block";
        return;
      }
      requestAnimationFrame(update);
    }

    // 处理键盘输入（消除对应代码）
    function handleKeyPress(e) {
      const key = e.key.toLowerCase();
      for (let i = codes.length - 1; i >= 0; i--) {
        const code = codes[i];
        if (code.text === key) {
          // 消除代码
          code.el.remove();
          codes.splice(i, 1);
          // 加分
          score++;
          document.getElementById("score").textContent = score;
          // 加速/提高生成频率（每10分升级一次）
          if (score % 10 === 0) {
            speed += 0.5;
            spawnRate = Math.max(500, spawnRate - 100); // 最低间隔500ms
          }
          break;
        }
      }
    }

    // 启动游戏
    initGame();
  </script>
</body>
</html>